<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生管理</title>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<form action="xqcfile/xqcupload" method="post"  enctype="multipart/form-data">
    <input type="file" name="userimg"/> <br>
    <input type="submit" value="提交" />
</form>
<div id="dd"></div>
<img id="imgPath" src="" >
<button id="btn">show</button>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--自定义性别模板-->
<script type="text/html" id="titleTpl">
    {{#  if(d.sex == 0){ }}
    女
    {{#  } else if(d.sex == 1) { }}
    男
    {{#  } else { }}
    。。。
    {{#  } }}
</script>

<script>

    layui.use([ 'jquery', 'layer', 'form', 'table','laydate','upload'], function(){
        var $ = layui.jquery;
        var table = layui.table //表格

        $('#btn').click(function () {
            // alert("ssss")
            var data = {"msg":"","code":0,"data":[{"cId":1,"classRoom":{"cId":1,"cName":"一年一班"},"sEnrol":"2020-06-11","sGender":1,"sGraduate":"2020-06-11","sId":2,"sName":"qq","sSid":"upload\\72cb8dc962134b70b9b046a6421250c2.jpg","sStatus":1,"teachers":[]},{"cId":2,"classRoom":{"cId":2,"cName":"一年二班"},"sEnrol":"2020-06-24","sGender":0,"sGraduate":"2020-06-09","sId":3,"sName":"方阳","sSid":"202007103","sStatus":1,"teachers":[]},{"cId":2,"classRoom":{"cId":2,"cName":"一年二班"},"sEnrol":"2016-09-01","sGender":1,"sGraduate":"2020-06-09","sId":4,"sName":"烨烨","sSid":"202007104","sStatus":1,"teachers":[]},{"cId":1,"classRoom":{"cId":1,"cName":"一年一班"},"sEnrol":"2016-09-01","sGender":1,"sGraduate":"2019-06-09","sId":5,"sName":"叶","sSid":"upload\\49b0944c3d4240a3bf4ec0d87bda6116.jpg","sStatus":3,"teachers":[]},{"cId":1,"classRoom":{"cId":1,"cName":"一年一班"},"sEnrol":"2016-09-01","sGender":0,"sGraduate":"2019-06-09","sId":6,"sName":"学生6","sSid":"202007106","sStatus":3,"teachers":[]},{"cId":2,"classRoom":{"cId":2,"cName":"一年二班"},"sEnrol":"2018-09-01","sGender":1,"sGraduate":"2020-06-09","sId":7,"sName":"学生7","sSid":"202007107","sStatus":1,"teachers":[]},{"cId":2,"classRoom":{"cId":2,"cName":"一年二班"},"sEnrol":"2018-09-01","sGender":0,"sGraduate":"2020-06-09","sId":8,"sName":"学生8","sSid":"202007108","sStatus":2,"teachers":[]},{"cId":3,"classRoom":{"cId":3,"cName":"一年三班"},"sEnrol":"2018-09-01","sGender":1,"sGraduate":"2020-06-09","sId":9,"sName":"学生9","sSid":"202007109","sStatus":1,"teachers":[]},{"cId":3,"classRoom":{"cId":3,"cName":"一年三班"},"sEnrol":"2018-09-01","sGender":0,"sGraduate":"2020-06-09","sId":10,"sName":"学生10","sSid":"202007110","sStatus":2,"teachers":[]},{"cId":4,"classRoom":{"cId":4,"cName":"一年四班"},"sEnrol":"2018-09-01","sGender":1,"sGraduate":"2020-06-09","sId":11,"sName":"学生11","sSid":"202007111","sStatus":1,"teachers":[]}],"count":20}
            console.log("asd:"+data.data[0].sSid)
            // $('#imgPath').attr('src', data.data[0].sSid);
            $('#dd').html('<img id="imgPath" src="'+data.data[0].sSid+'" >')
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 565
            ,url: 'user/getAllUser' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'uid', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                ,{field: 'uname', title: '用户名', width:80}
                ,{field: 'sex', title: '性别', width:80, sort: true , templet: '#titleTpl'}
                ,{field: 'birthday', title: '生日', width:150}
                ,{field: 'age', title: '年龄', width: 135, sort: true, totalRow: true}
                ,{field: 'address', title: '地址', width: 135, sort: true}
                ,{fixed: 'right', width: 185, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });
    });
</script>
</body>
</html>